/* eslint-disable prefer-const */
<template>
  <div class="home" @scroll="onScrollChange" ref="home">
    <navigation-bar :isShowBack="false" :navBarStyle="navBarStyle">
      <!-- 左侧插槽 -->
      <template v-slot:nav-left>
        <img :src="navBarCurrentSlotStyle.leftIcon" alt="">
      </template>
      <!-- 中间插槽 -->
      <template v-slot:nav-center>
        <search :bgColor="navBarCurrentSlotStyle.search.bgColor" :hintColor="navBarCurrentSlotStyle.search.hintColor" :icon="navBarCurrentSlotStyle.search.icon"></search>
      </template>
      <!-- 右侧插槽 -->
      <template v-slot:nav-right>
        <img :src="navBarCurrentSlotStyle.rightIcon" alt="">
      </template>
    </navigation-bar>
      <div class="home-content">
        <!-- swiper -->
          <my-swiper :swiperImgs="swiperData.map(item => item.icon)" :height="swiperHeight"></my-swiper>
        <!-- 520活动 -->
          <activity>
            <div class="activity-520">
              <img v-for="(item, index) in activityDatas" :key="index"
                :src="item.icon" alt="">
            </div>
          </activity>
          <!-- 功能选项 -->
          <modeOptions></modeOptions>
          <!-- 秒杀模块 -->
          <seconds :dataSource="secondDatas"></seconds>
          <!-- 拼购节 -->
          <activity>
            <div class="activity-pin-gou-jie">
              <img src="@img/pinGouJie.gif" alt="拼购节">
            </div>
          </activity>
          <!-- 商品列表 -->
          <goods :layoutType="'3'" :isScroll="false"></goods>
      </div>
  </div>
</template>

<script>
import MySwiper from '@c/swiper/MySwiper.vue'
import Activity from '@c/currency/Activity.vue'
import ModeOptions from '@c/currency/ModeOptions.vue'
import Seconds from '@c/seconds/Seconds.vue'
import Goods from '@c/goods/Goods.vue'
import NavigationBar from '@c/currency/NavigationBar.vue'
import Search from '@c/currency/Search.vue'
export default {
  components: {
    MySwiper,
    Activity,
    ModeOptions,
    Seconds,
    Goods,
    NavigationBar,
    Search
  },
  data: function () {
    return {
      swiperData: [],
      swiperHeight: '184px',
      activityDatas: [],
      secondDatas: [],
      // navBar 插槽样式数据， 包含页面未开始滑动的时候插槽的样式
      // 和页面滑动到锚点之前的样式
      navBarSlotStyle: {
        // 默认样式
        normal: {
          leftIcon: require('@img/more-white.svg'),
          search: {
            bgColor: '#ffffff',
            hintColor: '#999999',
            icon: require('@img/search.svg')
          },
          rightIcon: require('@img/message-white.svg')
        },
        // 高亮样式
        highlight: {
          leftIcon: require('@img/more.svg'),
          search: {
            bgColor: '#d7d7d7',
            hintColor: '#ffffff',
            icon: require('@img/search-white.svg')
          },
          rightIcon: require('@img/message.svg')
        }
      },
      // navBar 当前使用的插槽样式
      navBarCurrentSlotStyle: {},
      // navBar 的定制样式
      navBarStyle: {
        position: 'fixed',
        backgroundColor: ''
      },
      // 记录页面滚动值
      scrollTopValue: -1,
      // 锚点值
      ANCHOR_SCROLL_TOP: 160
    }
  },
  created: function () {
    this.navBarCurrentSlotStyle = this.navBarSlotStyle.normal
    this.initData()
  },
  /* keepAlive 组件被激活的时候调用
   * 为滑动模块指定滑动距离
   **/
  activated: function () {
    this.$refs.home.scrollTop = this.scrollTopValue
  },
  methods: {
    // 获取数据
    initData: function () {
      // this.$http = axios;
      // this.$http.get('./swiper').then(data => {
      //   this.swiperData = data.list
      // }).catch(err => {
      //   console.log(err)
      // })
      // // 520活动数据
      // this.$http.get('./activitys').then(data => {
      //   this.activityDatas = data.list
      // }).catch(err => {
      //   console.log(err)
      // })

      // axios 同时发送多个请求（并行）
      this.$http.all([
        this.$http.get('/swiper'),
        this.$http.get('/activitys'),
        this.$http.get('/seconds')
      ]).then(this.$http.spread((swiperData, activityData, secondsData) => {
        this.swiperData = swiperData.list
        this.activityDatas = activityData.list
        this.secondDatas = secondsData.list
      }))
    },
    /**
     * 监听页面滚动
     * 1、获取当前页面滚动距离
     * 2、计算navBar背景颜色（navBar 背景透明度）
     *      当前滚动距离 / 锚点值 = navBar 背景透明度 （opacity）
     * 3、opacity > 1 当前滚动距离 已经等于或者超过锚点值， 当前navBar插槽的样式变为 高亮状态样式
     *  否则的话opacity < 1 当前navBar插槽的样式应该为默认样式
     */
    onScrollChange: function ($event) {
      // 获取当前页面滚动距离
      this.scrollTopValue = $event.target.scrollTop
      // 计算 navBar 背景颜色 （navar背景透明度）
      // eslint-disable-next-line prefer-const
      let opacity = this.scrollTopValue / this.ANCHOR_SCROLL_TOP
      // 指定 navBar 插槽样式
      if (opacity >= 1) {
        this.navBarCurrentSlotStyle = this.navBarSlotStyle.highlight
      } else {
        this.navBarCurrentSlotStyle = this.navBarSlotStyle.normal
      }

      // 根据透明度比例来设置 navBar 的背景颜色
      this.navBarStyle.backgroundColor = 'rgba(255, 255, 255, ' + opacity + ')'
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';
    .home {
        width: 100%;
        height: 100%;
        background-color: $bgColor;
        overflow: hidden;
        overflow-y: auto;

        &-content {
          height: 100%;

          .activity-520 {
            margin-top: px2rem(-8);
            border-top-left-radius: px2rem(8);
            border-top-right-radius: px2rem(8);

            img {
              display: inline-block;
              width: 33.33%;
            }
          }

          .activity-pin-gou-jie {
            background-color: white;
            margin: $marginSize;

            img {
              width: 100%;
            }
          }
        }
    }

</style>
